<template>
	<view class="container" :class="'theme-'+theme">
		<view class="addTitle">
			<view class="titleDetail">
				<view class="titleLeft">
					<image src="../../static/newh5/fanhui.png" class="yticon"
						style="width: 13px;height: 20px;color:black" @click="returnIndex()"></image>
				</view>
				<view class="titleCenter">
					<b class="titleText">商品评价</b>
				</view>
				<view class="titleRight" style="color: #269cd3;flex:1"> </view>
			</view>
		</view>
		<view class="my-nav">
			<u-tabs-swiper ref="uTabs" class="my-tabs" :active-color="themeColor" :list="tabs" :current="current"
				:show-bar="false" @change="tabsChange" :is-scroll="false">
			</u-tabs-swiper>
			<view class="rate themeTextColor">好评度:{{highRate}}%</view>
		</view>
		<swiper class="my-swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view>
						<view style="display: flex;justify-content: flex-end;padding: 20rpx 20rpx 0 0;">
							<u-subsection @change="subChange" :active-color="themeColor" :bold="false"
								style="width: 280rpx;" font-size="24" height="50" :list="list" :current="currentSub"
								mode="subsection">
							</u-subsection>
						</view>
						<view class="review" v-for="review in reviews" :key="review.id">
							<view class="review_header">
								<image src="../../static/missing-face.png" mode="widthFix" />
								<view class="review_header_name">{{review.username}}</view>
								<view>{{review.createTime}}</view>
							</view>
							<view class="review_rate">
								<uni-rate size="20" disabled :value="review.score" color="#bbb"
									disabledColor="#ffca3e" />
								<view class="review_rate_name">{{review.productName}}</view>
							</view>
							<view class="review_content">
								{{review.content}}
							</view>
							<view class="review_files" v-if="review.files&&review.files.length>0">
								<image
									v-for="(file,index) in review.files"
									:key="file.id" :src="file.fileUrl" @click="preview(review.files,index)"
									mode="widthFix" />
							</view>
							<template v-if="review.replyList">
								<view class="review_reply" v-for="(r,rIndex) in review.replyList" :key="r.id">
									<view class="review_reply_content">
										<text style="color: #aaa;">卖家回复：</text>
										{{r.content}}
									</view>
									<view class="review_reply_files" v-if="r.replyImgUrl">
										<image v-for="(rUrl,urlIndex) in r.replyImgUrl.split(',')" :key="rUrl"
											:src="rUrl" @click="preview(r.replyImgUrl.split(','),urlIndex,1)"
											mode="widthFix" />
									</view>
								</view>
							</template>
							<template v-if="review.addonList">
								<view class="review_reply" v-for="(addon,rIndex) in review.addonList" :key="addon.id">
									<view class="review_reply_content" style="color:#333;">
										<text style="color: #d9001b;">追评：</text>
										{{addon.content}}
									</view>
									<view class="review_reply_files" v-if="addon.files">
										<image v-for="(rUrl,urlIndex) in addon.files" :key="rUrl" :src="rUrl.fileUrl"
											@click="preview(addon.files,urlIndex)" mode="widthFix" />
									</view>
									<template v-if="addon.replyList">
										<view class="review_reply" style="padding: 0;" v-for="(r,rIndex) in addon.replyList" :key="r.id">
											<view class="review_reply_content">
												<text style="color: #aaa;">卖家回复：</text>
												{{r.content}}
											</view>
											<view class="review_reply_files" v-if="r.replyImgUrl">
												<image v-for="(rUrl,urlIndex) in r.replyImgUrl.split(',')" :key="rUrl"
													:src="rUrl" @click="preview(r.replyImgUrl.split(','),urlIndex,1)"
													mode="widthFix" />
											</view>
										</view>
									</template>
								</view>
							</template>
						</view>
						<uni-load-more :status="loadingType"></uni-load-more>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		goback
	} from "@/common/utils/navigateBack.js";
	import {
		getReviewList,
		getReviewRate
	} from '@/api/product/list.js'
	export default {
		data() {
			return {
				id: '',
				reviews: {},
				reviewRate: {},
				reply: {},
				page: 1,
				loadingType: 'more',
				highRate: 0,
				searchParams: {
					sort: 'create_time',
					order: 'desc',
					scoreStr: 'all',
				},
				currentSub: 0,
				current: 0,
				swiperCurrent: 0,
				list: [{
						name: '时间排序',
						status: 'create_time'
					},
					{
						name: '推荐排序',
						status: 'score'
					}
				],
				tabs: [{
						name: '全部评价',
						status: 'all',
						key: 'count'
					},
					{
						name: '晒图',
						status: 'pic',
						key: 'picCount'
					},
					// {
					// 	name: '追评',
					// 	key: 'addonCount',
					// 	status: 'addon'
					// },
					{
						name: '好评',
						key: 'hignCount',
						status: 'hign'
					},
					{
						name: '中评',
						key: 'middleCount',
						status: 'middle'
					},
					{
						name: '差评',
						key: 'badCount',
						status: 'bad'
					},
				],
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getRate()
			this.getReviews()
		},
		methods: {
			returnIndex() {
				goback()
			},
			getReviews() {
				if (this.loadingType === 'loading') return
				this.loadingType = 'loading'
				const params = {
					pid: this.id,
					page: this.page,
					limit: 10,
					...this.searchParams
				}
				getReviewList(params).then(res => {
					if (res.code === 0) {
						this.reply = {
							...this.replyData,
							...res.data.reply
						}
						const temp = res.data.page.records;
						const list = temp.filter(i => !i.parentId)
						const addonList = temp.filter(i => i.parentId)
						list.forEach(item => {
							const t = addonList.filter(a => a.parentId == item.id)
							t.forEach(tr => {
								if (this.reply[tr.id]) {
									this.$set(tr, 'replyList', this.reply[tr.id])
								}
							})
							this.$set(item, 'addonList', t)
							if (this.reply[item.id])
								this.$set(item, 'replyList', this.reply[item.id])
						})
						if (this.page === 1) {
							this.reviews = list
						} else {
							this.reviews.push(...list)
						}
						console.log(this.reviews)
						this.loadingType = this.reviews.length >= Number(res.data.page.total) ? 'noMore' : 'more'
						if (this.loadingType === 'more')
							this.page++;
					} else {
						this.loadingType = 'more'
					}
				}).catch(e => {
					console.log(e)
					this.loadingType = 'more'
				})
			},
			getRate() {
				const params = {
					pid: this.id
				}
				getReviewRate(params).then(res => {
					if (res.code === 0) {
						this.reviewRate = res.data
						this.highRate = Number(this.reviewRate.highRate) * 100
						this.tabs.forEach((tab, index) => {
							const count = this.reviewRate[tab.key]
							if (count) {
								this.$set(this.tabs[index], 'name', this.tabs[index].name + `(${count})`)
							}
						})
					}
				})
			},
			tabsChange(e) {
				this.swiperCurrent = e
				this.searchParams.scoreStr = this.tabs[this.swiperCurrent].status
				this.page = 1
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
				this.getReviews()
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			onreachBottom() {
				if (this.loadingType === 'loading') return
				if (this.loadingType === 'more') {
					this.getReviews()
				}
			},
			subChange(index) {
				this.currentSub = index
				this.searchParams.sort = this.list[index].status
				this.page = 1
				this.getReviews()
			},
			preview(files, index, type = 0) {
				let urls
				if (type == 1) {
					urls = files
				} else
					urls = files.map(item => item.fileUrl)
				uni.previewImage({
					urls: urls,
					loop: true,
					current: index
				});
			}
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		background: white;
		height: 100%
	}

	.my-nav {
		position: sticky;
		display: flex;
		align-items: center;
		box-shadow: 0 0 10rpx 2rpx #ebebeb;
		position: sticky;
		z-index: 999;
		padding-right: 10rpx;

		.my-tabs {
			width: 0;
			flex: 1;
			margin-right: 10rpx;

			/deep/.u-tabs-item {
				font-size: $my-font-size-base !important;
			}
		}

		.rate {
			white-space: nowrap;
		}
	}

	.my-swiper {
		height: calc(100% - 100rpx - 80rpx);
	}

	.review {
		padding: 20rpx;

		&_header {
			display: flex;
			align-items: center;
			color: #7f7f7f;

			image {
				width: 72rpx;
				height: 72rpx;
			}

			&_name {
				flex: 1;
				width: 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin: 0 10rpx;
			}
		}

		&_rate {
			display: flex;
			align-items: center;
			color: #7f7f7f;
			padding: 10rpx 0;

			&_name {
				flex: 1;
				text-align: right;
				margin-left: 20rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		&_content {
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;

		}

		&_files {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			image {
				border-radius: 20rpx;
				margin-top: 20rpx;
				background-color: #f2f2f2;
				width: calc((100vw - 100rpx) / 4);
				height: calc((100vw - 100rpx) / 4);
				margin-right: 20rpx;

				&:nth-child(4n) {
					margin-right: 0;
				}
			}
		}

		&_reply {
			background-color: #f2f2f2;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 20rpx;

			&_content {
				color: #c2761c;
			}

			&_files {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				image {
					border-radius: 20rpx;
					margin-top: 20rpx;
					background-color: #d7d7d7;
					width: calc((100vw - 140rpx) / 4);
					height: calc((100vw - 140rpx) / 4);
					margin-right: 20rpx;

					&:nth-child(4n) {
						margin-right: 0;
					}
				}
			}
		}
	}

	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			border-bottom: 1px solid #f5f5f5;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				padding: 20upx 0;

				text {
					font-size: $font-base;
					color: $font-color-dark;
				}
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}

			.time {
				text-align: right;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}
</style>
